<template>
  <el-form ref="projectForm" :model="formData" :rules="rules" label-width="100px">
    <el-form-item label="" prop="name" label-width="0">
      <el-input v-model="formData.name" placeholder="请输入项目名称" clearable
                class="form-item-input"></el-input>
    </el-form-item>
    <el-form-item label="" prop="description" label-width="0">
      <el-input v-model="formData.description" placeholder="请输入项目描述（可空）" clearable
                class="form-item-input"></el-input>
    </el-form-item>
    <el-button type="primary" @click="handleSubmit" class="form-item-input">保存</el-button>
  </el-form>
</template>

<script>
import {addProject, updateProject} from '@/api/project'

export default {
  name: 'ProjectForm',
  props: {
    formType: {
      type: String,
      default: 'add'
    },
    projectData: {
      type: Object,
      default: function () {
        return {
          id: undefined,
          name: undefined,
          description: undefined
        }
      }
    }
  },
  data () {
    return {
      formData: {
        name: undefined,
        description: undefined
      },
      rules: {
        name: [
          this.$validate.necessary('请输入项目名称'),
          this.$validate.length(2, 64, '项目名称')
        ]
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      if (this.formType === 'update') {
        // this.$set(this.formData, 'name', this.project.name)
        // this.$set(this.formData, 'description', this.project.description)
        // this.$set(this.projectData, 'id', this.project.id)
        this.formData = {
          name: this.project.name,
          description: this.project.description
        }
        this.projectData.id = this.project.id
      }
    },
    handleSubmit () {
      switch (this.formType) {
        case 'update':
          this.updateProjectData()
          break
        case 'add':
          this.insertProject()
          break
        default:
          this.insertProject()
      }
      this.$emit('closeForm')
    },
    insertProject () {
      this.$refs['projectForm'].validate(valid => {
        if (!valid) {
          this.$notify.error('表单验证失败')
          return
        }
        addProject(this.formData).then(res => {
          this.$notify.success({
            title: '新增成功',
            message: '新增项目ID：' + res.data.id
          })
          this.$refs['projectForm'].resetFields()
        }).catch(res => {
          this.$notify.error({
            title: '新增项目失败',
            message: res.msg
          })
        })
      })
    },
    updateProjectData () {
      this.$refs['projectForm'].validate(valid => {
        if (!valid) {
          this.$notify.error('表单验证失败')
          return
        }
        if (!this.projectData.id) {
          this.$notify.error('缺少项目ID，无法更新')
          return
        }
        updateProject(this.formData, this.projectData.id).then(() => {
          this.$notify.success('更新成功')
        }).catch(res => {
          this.$notify.error({
            title: '更新项目失败',
            message: res.msg
          })
        })
      })
    }
  },
  watch: {
    projectData: {
      handler (newVal, oldVal) {
        this.formData = newVal
        this.init()
      },
      deep: true
    }
  },
  computed: {
    project () {
      return this.$store.getters.currentProjectData
    },
    isUpdateMode () {
      return this.formType === 'update'
    }
  }
}
</script>

<style lang="scss" scoped>
.form-item-input {
  width: 100%;
}
</style>
